<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>积分明细</title>

    <link href="../../../css/style.css" rel="stylesheet" type="text/css">
    <link href="../../../css/mui.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../../../src/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../src/style.css">
    <style>
        .mui-control-content { 
            background-color: white;
        }
        
        .mui-control-content .mui-loading {
            margin-top: 50px;
        }
        
        #integraldetail .mui-table-view .mui-table-view-cell {
            border-bottom: solid 1px #f0f0f0;
            margin: 0 15px;
            background: #fff;
        }
        
        .mui-table-view-cell {
            padding: 11px 3px;
        }
        
        .mui-segmented-control.mui-segmented-control-inverted {
            width: 50%;
            margin: 0 auto;
        }
        
        #segmentedControl {
            text-align: center;
        }
        
        #segmentedControl ul li {
            display: inline-block;
            width: 20%;
        }
        
        #segmentedControl a {
            width: 45%; 
            border: none;
            background: none;
            border-bottom: solid 2px #fff;
            line-height: 20px!important;
            overflow: inherit
        }
        
        .mui-segmented-control .mui-control-item.mui-active {
            border-bottom: solid 2px #23aae2!important;
            color: #23aae2!important;
        }
        
        #nowDate {
            margin-bottom: 0;
            background: none;
            font-size: 12px;
            color: #787d81;
            border: none;
        }
        
        .mui-navigate-right:after,
        .mui-push-left:after,
        .mui-push-right:after {
            color: #999da0;
            font-size: 18px;
        }
        
        .integralContent {
            border-radius: 100%;
        }
        
        .integralContent .mui-pull-left {
            color: #898989;
        }
        
        .integralContent .mui-pull-left p {
            color: #898989;
        }
        
        .integralContent .mui-pull-left span {
            color: #323232;
            padding-left: 10px;
        }
        
        .integralContent .mui-pull-right {
            color: #efa417;
            text-align: right;
            font-size: 16px;
            overflow: inherit;
        }
        
        .integralContent .mui-pull-left p {
            color: #949897;
        }
        
        .mui-table-view-cell>a:not(.mui-btn) {
            overflow: inherit;
        }
        
        .mui-table-view-cell:after {
            display: none;
        }
        
        .mui-content {
            background: none;
        }
        
        ul:after,
        .clearfix:after {}
        .newIntegrTab li{
        	background: #fff;
        }
    </style>
</head>

<body>
    <div id="integraldetail">
    	<div id="pullrefresh" class="mui-content mui-scroll-wrapper list-frame" style="background: #fff!important;">
		<div class="mui-scroll">
        	<div class="mui-content">
	            <ul class="newIntegrTab">
	                <li>
	                    <a @tap='all' v-bind:class="[activeId==1?'newActive':'']" data-id="1" href="#">全部</a>
	                </li>
	                <li>
	                    <a @tap="shouru" v-bind:class="[activeId==2?'newActive':'']" data-id="2" href="#">收入</a>
	                </li>
	                <li>
	                    <a @tap="zhichu" v-bind:class="[activeId==3?'newActive':'']" data-id="3" href="#">支出</a>
	                </li>
	            </ul>
            <!-- <div id="slider" class="mui-slider">
                <div id="segmentedControl" class="mui-segmented-control">
                    <ul>
                        <li>
                            <a class="mui-control-item mui-active" href="#item1" @tap='all()'>全部</a>
                        </li>
                        <li>
                            <a class="mui-control-item" href="#item2" @tap="shouru()">收入</a>
                        </li>
                        <li>
                            <a class="mui-control-item" href="#item3" @tap="zhichu()">支出</a>
                        </li>
                    </ul>
                </div>
            </div> -->

            <div id="jifenall" style="background: #fff;">
                <div>
                    <div>
                        <ul class="IntegraList">
                            <li v-for="item in items" style="height: 100px;"> 
                                <div style="position: absolute; width: 80px; height: 80px;">
                                    <img v-bind:src="item.member_avatar" alt="">
                                </div>
                                <div>
                                    <span>{{item.member_name}}</span>
                                    <span>{{item.time}}</span>
                                    <span>{{item.rule}}</span>
                                    <span>{{item.number}}</span>
                                </div>
                            </li>
                        </ul>
                        <!-- <ul class="mui-table-view">
                            <li class="mui-table-view-cell mui-media" v-for="item in items">
                                <div class="integralContent">
                                    <img class="mui-media-object mui-pull-left" :src="item.member_avatar">
                                    <div class="mui-media-body mui-pull-left">
                                        <p class="mui-ellipsis">{{item.member_name}}<span>{{item.rule}}</span></p>
                                        {{item.time}}
                                    </div>
                                    <div class="mui-media-body mui-pull-right">
                                        {{item.number}}
                             
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </li>

                        </ul> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
   </div>
   </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.min.js"></script>
    <script src="../../../js/jquery-1.8.3.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script>
        mui.init({
			pullRefresh: {
				container: '#pullrefresh',
				down: {
					callback: function() {
						pages = 1
						pulldownRefresh(pages)
					}
				},
				up: {
					contentrefresh: '正在加载...',
					callback: function() {
						pages++;
						pullupRefresh(pages)
					}
				}
			} 

		});
        var state = '';
        var uid = '';
        var pages = 1;
          mui.plusReady(function() {
        
            state = app.getState();
            memberToken = state.memberToken;
            uid = state.userid;
           	childid = state.childid
           	
            data = {
                uid: uid,
                memberToken: memberToken,
                pages:1,
            };
            
          
            //获取消息列表   
            mui.post(Apiurl+'index/scorelist_new', data, function(data) { 
            	console.log(JSON.stringify(data))
                if (data.list && data.list.length > 0) {
                    pullrefresh.items = data.list;
                }else{
                	pullrefresh.items=''; 
                }
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            }, 'json')
        }) 
           var pullrefresh = new Vue({
                el: '#pullrefresh',
                data: {
                    items: [],
                    activeId: 1,
        
                },
                methods: {
                    all: function(e) {
                        console.log(e.target.dataset.id)
                        this.activeId = e.target.dataset.id
                        pages = 1;
                        data.type = '';
                        pulldownRefresh(pages)
                    },
                    shouru: function(e) {
                        console.log(e)
                        this.activeId = e.target.dataset.id

                        pages = 1;
                        data.type = 1;
                        pulldownRefresh(pages)
                    },
                    zhichu: function(e) {
                        console.log(e)
                        this.activeId = e.target.dataset.id

                        pages = 1;
                        data.type = 2;
                        pulldownRefresh(pages)
                    }
                }
            })
        //下拉刷新
        function pulldownRefresh(pages) {
            if (window.plus && plus.networkinfo.getCurrentType() === plus.networkinfo.CONNECTION_NONE) {
                plus.nativeUI.toast('似乎已断开与互联网的连接', {
                    verticalAlign: 'top'
                });
                return;
            }
            data.page = pages
            //获取消息列表   
            mui.post(Apiurl+'index/scorelist_new', data, function(data) {
                console.log(data)
                
                if (data.list && data.list.length > 0) {
                    pullrefresh.items = data.list;
                }else{
                	pullrefresh.items='';
                }
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            }, 'json')
        }
        //上拉加载
        function pullupRefresh(pages) {
            data.page = pages;
            //请求机构列表信息流 
            mui.post(Apiurl+'index/scorelist_new', data, function(data) {
                if (pages <= data.pagecount) {
                    if (data.list && data.list.length > 0) {
                        pullrefresh.items = pullrefresh.items.concat(data.list);
                    }
                }
                mui('#pullrefresh').pullRefresh().endPullupToRefresh();
            }, 'json');
        }
        window.addEventListener('refreshFamily',function(event){ 
        	if(event.detail.refreType==1){
	            data.child_id=childid
        	}else if(event.detail.refreType==0){
        		data.child_id='';  
        	}
        	
        	mui.post(Apiurl+'index/scorelist_new', data, function(data) {     
        		console.log(JSON.stringify(data))
                if (data.list && data.list.length > 0) {
                    pullrefresh.items = data.list;
                }else{
                	pullrefresh.items='';
                }
                mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
            }, 'json')
        })
    </script>
</body>

</html>